<template>
	<div ref="chart"  class="percentChart"></div>
</template>

<script>
	
	export default{
		props:["paras"],
		data(){
			
			return{
				chartobj:null,
				
			}
			
		},
		methods:{
			
			initChart(){	
				
				this.chartobj = $echarts.init(this.$refs.chart);				
				let option = this.getOption(this.paras);
				this.chartobj.setOption(option);
			},
			getOption(data){
			
				let usehour = data.useCourseHour||0;
				let totalhour = data.totalCourseHour||0;
				let rate = 0;
				if(totalhour==0||usehour==0){
					rate==0;
					totalhour=10;
				}else{
					rate = parseFloat(usehour/totalhour)*100
				}
				let datarate ={rate:rate.toFixed(0),usehour:usehour,totalhour:totalhour}	
				
				let dataStyle = {
						    normal: {
						        label: {
						            show: false
						        },
						        labelLine: {
						            show: false
						        }
						    }
				        };
				let placeHolderStyle1 = {
						    normal: {
						        color: '#20A0FF',//未完成的圆环的颜色
						        label: {
						            show: false
						        },
						        labelLine: {
						            show: false
						        }
						    },
						    emphasis: {
						        color: '#20A0FF'//未完成的圆环的颜色
						    }
						};
				let placeHolderStyle2 = {
						    normal: {
						        color: 'rgba(229, 233, 242,1)',//未完成的圆环的颜色
						        label: {
						            show: false
						        },
						        labelLine: {
						            show: false
						        }
						    },
						    emphasis: {
						        color: 'rgba(229, 233, 242,1)'//未完成的圆环的颜色
						    }
						};
				
				let rem = screen.width / 19.2;							
				let option = {
					    title: {
					        text: datarate.rate+'%',
					        x: 'center',
					        y: 'center',
					        textStyle: {
					            fontWeight: 'normal',
					            color: "#0bb6f0",
					            fontSize: 0.3*rem,
					            fontFamily:'微软雅黑'
					        }
					    },
    					backgroundColor:'#FFFFFF',
					    series: {
					            name: 'Line 1',
					            type: 'pie',
					            clockWise: true,
					            radius: ["90%", "100%"],
					            itemStyle: dataStyle,
					            hoverAnimation: false,
					            data: [{					            	
					                    value: datarate.usehour,					                
					                    itemStyle:placeHolderStyle1
					                }, {
					                    value: datarate.totalhour-datarate.usehour,					              
					                    itemStyle: placeHolderStyle2
					                }
					
					            ]
					        }
						};			
				return option;
			}
		},
		mounted(){
			this.initChart();
		}
	}
</script>

<style lang="scss">
	.percentChart{
		width:1.19rem;
		height:1.19rem;
	    backgroundColor:'#FFFFFF',
	}
</style>